<template>
    <div id="userGroupRoles">
        <el-dialog
        title="删除用户组角色"
        :visible.sync="dialogVisible"
        class=''
        top="10vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-tree
                    highlight-current
                    :data="userGroupRoles"
                    node-key="groupId"
                    default-expand-all
                    :expand-on-click-node="false"
                    ref="tree"
                    >
                        <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
                            <span  > {{ data.groupName}}:  
                                <el-tag size="mini" type="warning" v-if="data.roleName" style="margin-left: 20px"> {{data.roleName}}</el-tag>
                            </span>
                            <span v-if="data.userAssignId" @click="() => handleDelete(node, data)" style="float: right">
                                <el-icon class="el-icon-delete" ></el-icon>
                            </span>
                        </span>
                    </el-tree>
                </el-col>
            </el-row>
            
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleCancel">返 回</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props: ['isShowUserGroupRoles', 'userInfo'],
        data() {
            return {
                indent: 32,
                dataTree: [],
                groupsArr: [],
                userGroupList: [],
                userGroupRoles: []

            }
        },
        computed: {
            dialogVisible: {
                get() {
                    return this.isShowUserGroupRoles
                },
                set() {

                }
            },
        },
        created() {
            
        },
        mounted() {
            this.getGroupsList()
        },
        methods: {
            /**获取分组 */
           async getGroupsList() {
                await this.$server.systemControlApi.getSystemGroupsList().then( res => {
                    this.dataTree= res.data
                })
                this.getUserGroupRoleDetails()
            },
            /**获取用户分组、角色 */
            getUserGroupRoleDetails() {
                try {
                    this.$server.systemControlApi.getUserGroupRoleDetails(this.userInfo.userId).then(res => {
                        this.userGroupRoles = res.data
                        this.groupsArr= this.filterGroupIds(res.data)
                        
                    })
                }catch(err) {this.$paramsError(err)}
            },
            filterGroupIds(arr) {
                let arr1= []
                for(let i=0; i< arr.length; i++) {
                    if(arr[i].children.length > 0) {
                        arr1= arr1.concat(this.filterGroupIds(arr[i].children))
                    }else{
                        arr1.push(arr[i].groupId)
                    }
                }
                return arr1
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                   this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
     
            handleCancel() {
                this.$emit('cancelShow', false)
            },
            handleDelete(node,item) {
                try{
                    this.$confirm('确定删除该组角色？').then(_ => {   
                        this.$server.systemControlApi.deleteUserGroupRole(item.userAssignId).then(res => {
                            this.getUserGroupRoleDetails()
                        })
                    }).catch()
                }catch(err){this.$paramsError(err)}
            },
        }
    }
</script>